<template>
	<view>
		<card title="热门搜索" cover="/static/images/demo/search-banner.png"></card>
		<!-- 多色按钮 -->
		<view class="px-1 mb-2">
			<block v-for="(item, index) in hot" :key="index">
				<color-tag :item="item" :color="true"></color-tag>
			</block>
		</view>
		
		<!-- 常用分类 -->
		<card title="常用分类" :headBorderBottom="true">
			<color-tag v-for="(item, index) in hot" :key="index" 
			:item="item"
			:color="false"></color-tag>
		</card>
		
		<!-- 分割线 -->
		<divider></divider>
		
		<!-- 搜索记录 -->
		<card title="搜索记录">
			<my-uni-list>
			    <my-uni-list-item  title="小米" ></my-uni-list-item>
			</my-uni-list>
			
		</card>
	</view>
</template>

<script>
	import card from "@/components/common/card.vue"
	import colorTag from "@/components/search/color-tag.vue"
	import divder from "@/components/common/divider.vue"
	import myUniList from "@/components/uni-ui/uni-list/uni-list.vue"
	import myUniListItem from "@/components/uni-ui/uni-list-item/uni-list-item.vue"

	
	export default {
		components: {
			card,
			colorTag,
			myUniList,
			myUniListItem,
			
		},
		
		data() {
			return {
				hot: [
					{name: '领券中心'},
					{name: 'Redmi K20'},
					{name: 'RedmiBook 14'},
					{name: '智能积木 越野四驱车'},
					{name: '手环 腕带'},
				]
			}
		},
		methods: {
			
		},
		
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				uni.navigateTo({
					url: '../search-list/search-list',
				
				});
			}
		}
	}
</script>

<style>

</style>
